<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
    }

    .container{
        width: 300px;
        height: 100px;
        border: 1px solid red;
        margin: 20px auto;
    }

    .eat{
        width: 100px;
        height: 100px;
        /* border: 1px solid red; */
        position: relative;
        border-radius: 50%;
        overflow: hidden;
        display: inline-block;
    }

    .eat .eye{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: rgb(197, 212, 223);
        position: absolute;
        top: 10%;
        left: 45%;
        transform: translateX(-50%);
    }

    .eat .eye::after{
        content: '';
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: rgb(0, 0, 0);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .eat-top{
        width: 120px;
        height: 70px;
        background-color: rgb(9, 156, 53);
        position: absolute;
        top: -20px;
        left: -20px;
        transform: rotate(-30deg);
        animation: top-rotate 1s linear infinite;
    }

    .eat-bottom{
        width: 120px;
        height: 70px;
        background-color: rgb(9, 156, 53);
        position: absolute;
        bottom: -20px;
        left: -20px;
        transform: rotate(30deg);
        animation: bottom-rotate 1s linear infinite;
    }

    @keyframes top-rotate {
        0%{
            transform: rotate(-30deg);
        }

        50%{
            transform: rotate(0deg);
        }

        100%{
            transform: rotate(-30deg);
        }
    }

    @keyframes bottom-rotate {
        0%{
            transform: rotate(30deg);
        }

        50%{
            transform: rotate(0deg);
        }

        100%{
            transform: rotate(30deg);
        }
    }

    .beans{
        width: 120px;
        height: 30px;
        border: 1px solid rgb(9, 156, 53);
        position: absolute;
        display: inline-block;
        left: 200px;
        top: 55px;
    }

    .beans .bean{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: rgb(9, 156, 53);
        /* position: absolute; */
        display: inline-block;
        vertical-align: middle;
    }


</style>
<body>
    <div class="container">
        <div class="eat">
            <div class="eat-top"></div>
            <div class="eat-bottom"></div>
            <div class="eye"></div>
        </div>
    
        <div class="beans">
            <div class="bean"></div>
            <div class="bean"></div>
            <div class="bean"></div>
            <div class="bean"></div>
            <div class="bean"></div>
        </div>
    </div>
</body>
</html>